<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //class书写函数格式
    //     class Person {
    //         //必须要写constructor
    //         constructor( {name, age=18} ){
    //             this.name = name
    //             this.age = age
    //         }
    //     }
    //    console.log( new Person({name: '张三'}))


        //验证class数据类型（typeof）
        //console.log( typeof class A {}) //结果为function是函数

        //验证class原型constructor是否指向class
        // class A {}
        // console.log(A.prototype.constructor === A)  //输出为ture证明class原型constructor指向class

        //验证class的原型的constructor指向class
        // class A {}
        // var a = new A()
        // console.log(a.constructor === A)   //结果为true说明new出来的实例的constructor指向class

        //验证class类，new创建的实例对象在方法最终在prototype上体现
        // class A {
        //     fn () {}
        //     toString(){}
        // }
        // var a = new A()
        /* 在控制台验证中 通过new创建的实例A{}里无对象和方法，向上找到prototype上发现有fn属性*/
        
        // 验证class通过new创建实例时constructor会执行
        // class A {
        //     constructor(){
        //         this.name = "a"
        //         // 输出结果有1，证明在实例创建时constructor执行
        //         console.log(1)
        //     }
        // }
        // console.log(new A())   
        //输出结果为{name: "a"},证明在constructor中定义的属性和方法，会在实例的当前这一层存在

        //未定义constructor时，class也会默认添加constructor
        // class A {
        //     // constructor(){
        //     //     this.name = "a"
        //     //     console.log(1)
        //     // }
        // }
        // // 控制台执行完毕后在 A{}的 prototype属性中仍能找到constructor
        // console.log(new A())

            //class的this指向实例
        // class Logger {
        //     printName(name = 'world') {
        //         //此处打印出的this指向Logger实例
        //         console.log(this, 'this')
        //         this.print(`Hello ${name}`)
        //     }
        //     print(text){
        //         console.log(text)
        //     }
        // }
        // var log = new Logger
        // log.printName()


        // class Logger {
        //     printName(name = 'world') {
        //         console.log(this, 'this')
        //         this.print(`Hello ${name}`)
        //     }
        //     print(text){
        //         console.log(text)
        //     }
        // }
        // var {printName} = new Logger
        // printName()
        /* 打印结果为undefined,原因：在js严格模式中去调用函数，
        如果函数无调用者，则函数内部this为undefined */

            //使用箭头函数调用
        // class Logger {
        //     printName = (name = 'world') => {
        //         console.log(this, 'this')
        //         this.print(`Hello ${name}`)
        //     }
        //     print = (text) => {
        //         console.log(text)
        //     }
        // }
        // var {printName} = new Logger
        // printName()

        //控制台输出后由于箭头函数的原因，当前属性在实例上

        //使用bind方法
        class Logger {
            constructor(){
                this.printName = this.printName.bind(this)
            }
            printName(name = 'world') {
                console.log(this, 'this')
                this.print(`Hello ${name}`)
            }
            print = (text) => {
                console.log(text)
        }
    }
    var {printName} = new Logger
        printName()
    </script>
</body>
</html>